<template>
  <div class="title">配置</div>
  <el-scrollbar>
    <el-menu default-active="1" class="setting-menu" background-color="#F9FAFB">
      <el-menu-item v-for="item in menuList" :key="item.value" :index="item.value" @click="menuItemClick">
        <span class="menu-item">
          <SvgIcon :name="item.icon"></SvgIcon>
          {{ item.label }}
        </span>
      </el-menu-item>
    </el-menu>
  </el-scrollbar>
</template>

<script setup>
const props = defineProps({})

const emit = defineEmits(['menuItemClick'])

const menuList = [
  { label: '项目基本信息', value: '1', icon: 'base-info' },
  { label: '项目质量控制', value: '2', icon: 'quality-control' },
  // { label: '项目任务审核', value: '2' },
  { label: '项目日报审核', value: '3', icon: 'daily-review' },
  { label: '延期任务管理', value: '12', icon: 'progress-manage' },
  { label: '项目成员管理', value: '4', icon: 'member-manage' },
  { label: '项目进度管理', value: '5', icon: 'progress-manage' },
  { label: '项目风险管理', value: '7', icon: 'risk-manage' },
  { label: '项目文档管理', value: '8', icon: 'doc-manage' },
  // { label: '项目会议记录', value: '9' ,icon:'minute'},
  // { label: '项目成本管理', value: '10' ,icon:''},
  { label: '项目数据分析', value: '11', icon: 'data-analysis' },
]

function menuItemClick({ index }) {
  emit('menuItemClick', index)
}
</script>

<style lang="scss" scoped>
.setting-menu {
  height: 100%;
  border: none;
}
.menu-item {
  display: flex;
  align-items: center;
  .svg-icon {
    margin-right: 10px;
  }
}
.elp-menu-item {
  // padding-left: 0 !important;
  width: 160px !important;
  height: 36px !important;
  margin: 10px 0 !important;
  border-radius: 7px !important;
  &:hover {
    box-sizing: border-box;
    background: #eef2f8 !important;
  }
}
.elp-menu-item.is-active {
  box-sizing: border-box;
  // width: 150px !important;
  // height: 36px !important;
  background: #eef2f8 !important;
  // border-radius: 7px !important;
  // padding-left: 10px !important;
}

.title {
  font-size: 20px;
  font-weight: 700;
  color: #2e3033;
  line-height: 30px;
  padding-left: 10px;
  margin-bottom: 24px;
}
</style>
